<template>
  <div class="view-fill">
    <div class="app-container-flex">
      <NewFullScreen
        v-model="showDialog"
        title="评分项目详情"
        :needOperateAffair="true"
        :operateAffairData="affairTableInfo"
      >
        <template v-slot:full-button>
          <el-button
            v-if="$permission('evaluationItems:update')"
            @click="update"
            >修改</el-button
          >
        </template>
        <div class="model-panel">
          <div class="model-panel-title">
            <p>{{ $t('basic_information') }}</p>
          </div>
          <div class="model-panel-body">
            <basic-information :info="infoList"></basic-information>
          </div>
        </div>
      </NewFullScreen>
    </div>

    <PageDialog
      v-show="dialogInfo.visible"
      :title="dialogInfo.title"
      v-model:visible="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
      @reset="handleClose"
    >
      <page-form
        class="paddingBox order-model-formBox flex_wrap_start_start"
        v-model:ref-obj="formInfo.ref"
        :data="formInfo.data"
        :field-list="formInfo.fieldList"
        :label-width="formInfo.labelWidth"
        :rules="formInfo.rules"
      >
      </page-form>
    </PageDialog>
  </div>
</template>

<script setup name="evaluationItemsDetails">
import BasicInformation from '@/components/BasicInformation/index'
import PageTable from '@/components/PageTable/index'
import { orderOpAffairAll } from '@/api/affair'
import { getEvaluateItemById, updateEvaluateItem } from '@/api/evaluate.js'
import PageForm from '@/components/PageForm/index'
import PageDialog from '@/components/PageDialog/index'

const { proxy } = getCurrentInstance()
const emit = defineEmits()

const SetPreference = defineAsyncComponent(() =>
  import('@/components/SetPreference/index')
)

const props = defineProps(['visible', 'tableRow'])

const infoList = reactive({
  data: {},
  fieldList: [
    {
      label: '评分项目名称',
      value: 'itemName',
    },
    {
      label: '创建人',
      value: 'createUserName',
    },
    {
      label: '创建时间',
      value: 'createTime',
    },
    {
      label: '更新人',
      value: 'updateUserName',
    },
    {
      label: '更新时间',
      value: 'updateTime',
    },
    {
      label: '备注',
      value: 'remark',
      type: 'popover',
    },
  ],
})

const affairTableInfo = reactive({
  api: orderOpAffairAll,
  query: {
    orderType: 82,
    orderId: props.tableRow.id,
    sort: 'operate_time desc',
  },
})
const dialogInfo = reactive({
  type: '',
  visible: false,
  title: '新增评分项目',
  btLoading: false,
  width: '400px',
  btList: [
    {
      label: '关闭',
      event: handleClose,
      show: true,
    },
    {
      label: '保存',
      type: 'primary',
      event: saveForm,
      show: true,
    },
  ],
})
const formInfo = reactive({
  data: {},
  fieldList: [
    {
      label: '评分项目名称',
      value: 'itemName',
      type: 'input',
    },
    {
      label: '备注',
      value: 'remark',
      type: 'textarea',
    },
  ],
  rules: {
    itemName: [
      {
        required: true,
        message: '请输入评分项目名称',
        trigger: 'blur',
      },
    ],
  },
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})
onMounted(() => {
  getMain()
})

//新增/修改评分项目名称
function saveForm() {
  formInfo.ref.validate((valid) => {
    if (valid) {
      updateEvaluateItem(formInfo.data).then((res) => {
        if (res && res.success) {
          returnModify()
          handleClose()
        }
      })
    }
  })
}
//关闭弹窗
function handleClose() {
  dialogInfo.visible = false
  formInfo.data = {}
}
function update() {
  dialogInfo.title = '修改评分项目'
  dialogInfo.type = 'update'
  dialogInfo.visible = true
  formInfo.data = infoList.data
}
function returnModify() {
  getMain()
}

function getMain() {
  getEvaluateItemById(props.tableRow.id).then((resp) => {
    if (resp && resp.success) {
      infoList.data = resp.data
    }
  })
}
</script>

<style scoped></style>
